<template>
  <div class="header" @click="handleClickShow">
    <div class="content-wrapper">
      <div class="avatar">
        <img :src="seller.avatar" width=64 height=64>
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="description">
           {{seller.description}}/{{seller.deliveryTime}}分钟送达
        </div>
        <div class="support">
           <support-ico 
           :size=1 
           :type="seller.supports[0].type"/>
           <span class="text">{{seller.supports[0].description}}</span>
        </div>
      </div>
      <div v-if="seller.supports" class="support-count">
        <span class="count">{{seller.supports.length}}个</span>
        <i class="icon-keyboard_arrow_right"></i>
      </div>
    </div>
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>
    <div class="background">
       <img :src="seller.avatar" width="100%" height="100%">
    </div>
     
  </div>
</template>

<script>
import SupportIco from '@/components/support-ico/support-ico'
export default {
  name: 'Header',
  components: {
    SupportIco
  },
  data () {
    return {
      
    }
  },
  props: {
    seller: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    handleClickShow () {
      this.$emit('show-detail')
    }
  }
}
</script>

<style lang=stylus scoped>
  @import "~styles/stylus/mixin"
  @import "~styles/stylus/variable"
    .header
      position: relative
      overflow: hidden
      color: $color-white
      background: $color-background-ss
      .content-wrapper
        position: relative
        display: flex
        align-items: center
        padding: .48rem .24rem .36rem .48rem
        .avatar
          flex: 0 0 1.28rem
          width: 1.28rem
          margin-right: .32rem
          img
            border-radius: .04rem
        .content
          flex: 1
          .title
            display: flex
            align-items: center
            margin-bottom: .16rem
            .brand
              width: .6rem
              height: .36rem
              bg-image('../../../../assets/img/brand')
              background-size: .6rem .36rem
              background-repeat: no-repeat
            .name
              margin-left: .12rem
              font-size: $fontsize-large
              font-weight: bold
          .description
            margin-bottom: .16rem
            line-height: .24rem
            font-size: $fontsize-small
            text-align:left
          .support
            display: flex
            align-items: center
            .support-ico
              margin-right: .08rem
            .text
              line-height: .24rem
              font-size: $fontsize-small-s
        .support-count
          position: absolute
          right: .24rem
          bottom: .28rem
          display: flex
          align-items: center
          padding: 0 .16rem
          height: .48rem
          line-height: .48rem
          text-align: center
          border-radius: .28rem
          background: $color-background-sss
          .count
            font-size: $fontsize-small-s
          .icon-keyboard_arrow_right
            margin-left: .04rem
            line-height: .48rem
            font-size: $fontsize-small-s

      .bulletin-wrapper
        position: relative
        display: flex
        align-items: center
        height: .56rem
        line-height: .56rem
        padding: 0 .16rem
        background: $color-background-sss
        .bulletin-title
          flex: 0 0 .44rem
          width: .44rem
          height: .24rem
          margin-right: .08rem
          bg-image('../../../../assets/img/bulletin')
          background-size: .44rem .24rem
          background-repeat: no-repeat
        .bulletin-text
          flex: 1
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          font-size: $fontsize-small-s
        .icon-keyboard_arrow_right
          flex: 0 0 .2rem
          width: .2rem
          font-size: $fontsize-small-s
      .background
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        z-index: -1
        filter: blur(10px)

</style>
